<template>
    <section class="step">
        <div>
        <Timeline>
            <TimelineItem>
                <span slot="dot">手术当天</span>
                <div class="step-img" >
                    <img :src="$Url+data" alt="" v-for="data in list.images">
                </div>
                <div class="step-text">
                    <p>{{list.content}} <span>查看详情>></span> </p>
                </div>
                <div>
                    <div class="step-text">
                        <span>由最早日记浏览 <img src="../../assets/xia.png" alt=""></span>
                        <span>由最新日记浏览 <img src="../../assets/shang.png" alt=""></span>
                    </div>
                </div>
            </TimelineItem>
            <TimelineItem v-for="i in list.info" :key="i.id">
                <span slot="dot">手术第{{i.id}}天</span>
                <div class="step-img" >
                    <img :src="$Url+y" alt="" v-for="y in i.images">
                </div>
                <div>
                    <div class="step-text">
                        <p>{{i.content}} <span>查看详情>></span> </p>
                    </div>
                    <div class="step-time">
                        <span>{{i.time}}</span>
                        <p><Icon type="ios-heart-outline" class="icon" />赞<Icon type="ios-chatboxes" class="icon" />回复</p>
                    </div>
                </div>
            </TimelineItem>
            <TimelineItem>

            </TimelineItem>
        </Timeline>
        </div>
        <!--<div style="clear: both"></div>-->
    </section>
</template>

<script>
    export default {
        name: "step",
        props:['list'],
        data () {
          return {
              images:[]
          }
        },
        created () {
            console.log(this.sortstudents());
        },
        methods:{
            sortstudents:function(){
                return sortByKey(this.list.info,'time')
            }
        }
    }
    function sortByKey(array,key){
        return array.sort(function(a,b){
            var x = a[key];
            var y = b[key];
            return((x<y)?-1:((x<y)?1:0));
        })
    }

</script>

<style  lang="less">
    .step {
        ul > :first-child {

            .ivu-timeline-item-head-custom {
                background-color: #f1f1f1;
                color: #666666;
            }

           }
        ul >:last-child{
               display: none !important;
            }
            .ivu-timeline-item-head-custom {
                width: 95px !important;
                height: 28px;
                line-height: 25px;
                background-color: #ff5371;
                color: #ffffff;
                border-radius: 4px;
                left: 0;
                text-align: center;
            }
            .ivu-timeline-item {
                min-height: 200px;

            }
            .ivu-timeline-item-content {
                margin-left: 120px;
                border-bottom: 1px solid #e0e0e0;
                padding-right: 20px;
                padding-bottom: 10px;
                .step-img{
                    margin-bottom:18px;
                    img{
                        width: 134px;
                        height: 134px;
                        margin-right: 16px;
                    }
                }
                .step-text{
                    line-height: 20px;
                    >:first-child{
                        color: #FE5371;
                    }
                  span{
                      margin-right: 45px;
                      vertical-align: top;

                      img{
                          margin-left: 5px;
                          margin-top: 1px;
                      }
                  }
                    p{
                        color: #666666 !important;
                        font-size: 14px;
                        line-height: 23px;
                        padding-bottom: 20px;
                        text-align: justify;
                        span{
                            color: #FE5371;
                        }
                    }
                }
                .step-time{
                    margin-bottom: 20px;
                    span{
                        color: #999999;
                        font-size: 12px;
                    }
                    p{
                        width: 300px;
                        float: right;
                        text-align: right;
                        color: #999999;
                        font-size: 12px;
                        .icon{
                            font-size: 15px;
                            margin-right: 5px;
                        }
                        >:last-child{
                            margin-left: 20px;
                        }
                    }
                }

            }
            .ivu-timeline-item-tail {
                left: 45px;
                top: 30px;
                height: 85%;
            }
        }


</style>